<template>
  <div class="myBetCell">
    <div v-for="bill in list" :key="bill.months" class="myBetCell-bill">
      <!-- 表头:天 -->
      <div class="myBetCell-bill-header">
        <div
          class="myBetCell-bill-header-title"
          :style="{ 'margin-bottom': '0' }"
        >
          {{ bill.months }}
        </div>
      </div>
      <!-- 列表 -->
      <div
        class="myBetCell-list"
        v-for="(item, index) in bill.list"
        :key="item.id"
        :style="{
          'border-bottom':
            index != bill.list.length - 1
              ? '0.7px solid rgba(115, 119, 128, 0.15)'
              : 'none',
        }"
      >
        <!-- 样式一: 下注记录 -->
        <template v-if="cellType == 1">
          <!-- top 信息 -->
          <div class="myBetCell-list-top items-center">
            <img
              v-if="item.costType == 1"
              class="myBetCell-list-left"
              style="margin-top: 2.5px"
              src="/image/lotterymoney/mybet-bdcxz.svg"
            />
            <img
              v-if="item.costType == 2"
              class="myBetCell-list-left"
              style="margin-top: 2.5px"
              src="/image/lotterymoney/mybet-myxz.svg"
            />
            <img
              v-if="item.costType == 3"
              class="myBetCell-list-left"
              style="margin-top: 2.5px"
              src="/image/lotterymoney/mybet-myfree.svg"
            />
            <div class="myBetCell-list-right">
              <!-- 标题 -->
              <div class="items-center" style="margin-bottom: 9px">
                <span class="myBetCell-list-right-title"
                  >{{
                    item.costType == 1
                      ? "BDC"
                      : $t(
                          item.costType == 2
                            ? "lotteryMoney.desc_title1_title9"
                            : "lotteryMoney.free"
                        )
                  }}
                </span>
                <!-- tag -->
                <template v-if="item.sessionId == item.periodId">
                  <img
                    v-if="globalStore.$state.language == 'VI'"
                    class="myBetCell-list-right-title-tag"
                    src="/image/lottery-v3/super-icon1.svg"
                  />
                  <img
                    v-else-if="globalStore.$state.language == 'pt'"
                    class="myBetCell-list-right-title-tag"
                    src="/image/lottery-v3/super-icon2.svg"
                  />
                  <img
                    v-else
                    class="myBetCell-list-right-title-tag"
                    src="/image/lottery-v3/super-icon.svg"
                  />
                </template>
              </div>
              <!-- 时间 + 花费 -->
              <div class="items-center" style="justify-content: space-between">
                <span class="myBetCell-list-right-time">{{
                  item.timeStr
                }}</span>
                <span class="myBetCell-list-right-bdc">
                  {{ item.costAmount }} BDC
                </span>
              </div>
            </div>
          </div>
          <!-- 下注号码,中奖号码 -->
          <div class="myBetCell-list-bottom items-center">
            <div class="myBetCell-list-bottom-item items-center">
              <div class="myBetCell-list-bottom-title">
                {{ $t("lotteryMoney.xzType") }}
              </div>
              <div class="myBetCell-list-bottom-nums items-center">
                <div
                  class="myBetCell-list-bottom-nums-item"
                  v-for="(num, index) in includesNumToArr(
                    item.hashScore || '*****',
                    item.drawNo
                  )"
                  :key="index"
                >
                  <img
                    v-if="num.include"
                    class="myBetCell-list-bottom-nums-item-bg"
                    src="/image/lottery-v3/num-zj-bg1.svg"
                  />
                  <img
                    v-else
                    class="myBetCell-list-bottom-nums-item-bg"
                    src="/image/lottery-v3/num-xz-bg1.svg"
                  />
                  <div
                    class="myBetCell-list-bottom-nums-item-text"
                    :style="{ color: num.include ? '#fff' : '#8e96a4' }"
                  >
                    {{ num.str }}
                  </div>
                </div>
              </div>
              <div class="myBetCell-list-bottom-bet">*{{ item.drawCount }}</div>
            </div>
            <div
              class="myBetCell-list-bottom-item items-center"
              @click.stop="jumpPage('webview1', item)"
            >
              <div
                class="myBetCell-list-bottom-title"
                style="text-align: right"
              >
                {{ $t("lotteryMoney.zjType") }}
              </div>
              <div class="myBetCell-list-bottom-nums items-center">
                <div
                  class="myBetCell-list-bottom-nums-item"
                  v-for="(num, index) in (item.hashScore || '*****').split('')"
                  :key="index"
                >
                  <img
                    class="myBetCell-list-bottom-nums-item-bg"
                    src="/image/lottery-v3/num-zj-bg1.svg"
                  />
                  <div class="myBetCell-list-bottom-nums-item-text">
                    {{ num }}
                  </div>
                </div>
              </div>
              <img
                class="myBetCell-list-bottom-jt"
                src="/image/jt-right0-icon.svg"
              />
            </div>
          </div>
        </template>
        <!-- 样式二: 中奖记录 -->
        <template v-else>
          <!-- top 信息 -->
          <div class="myBetCell-list-top items-center">
            <img
              v-if="item.prizeLevel == 1"
              class="myBetCell-list-left"
              style="margin-top: 2.5px"
              src="/image/lottery-v3/record-ydj-icon.svg"
            />
            <img
              v-if="item.prizeLevel == 2"
              class="myBetCell-list-left"
              style="margin-top: 2.5px"
              src="/image/lottery-v3/record-edj-icon.svg"
            />
            <img
              v-if="item.prizeLevel == 3"
              class="myBetCell-list-left"
              style="margin-top: 2.5px"
              src="/image/lottery-v3/record-sdj-icon.svg"
            />
            <img
              v-if="item.prizeLevel == 50"
              class="myBetCell-list-left"
              style="margin-top: 2.5px"
              src="/image/lottery-v3/record-cyj-icon.svg"
            />
            <div class="myBetCell-list-right">
              <!-- 标题 -->
              <div class="myBetCell-list-right-title-box items-center">
                <div>
                  <span class="myBetCell-list-right-title"
                    >{{
                      $t(
                        item.prizeLevel == 1
                          ? "lotteryMoney.ydj"
                          : item.prizeLevel == 2
                          ? "lotteryMoney.edj"
                          : item.prizeLevel == 3
                          ? "lotteryMoney.sdj"
                          : "lotteryMoney.cyj"
                      )
                    }}
                  </span>
                  <!-- tag -->
                  <template v-if="item.sessionId == item.periodId">
                    <img
                      v-if="globalStore.$state.language == 'VI'"
                      class="myBetCell-list-right-title-tag"
                      src="/image/lottery-v3/super-icon1.svg"
                    />
                    <img
                      v-else-if="globalStore.$state.language == 'pt'"
                      class="myBetCell-list-right-title-tag"
                      src="/image/lottery-v3/super-icon2.svg"
                    />
                    <img
                      v-else
                      class="myBetCell-list-right-title-tag"
                      src="/image/lottery-v3/super-icon.svg"
                    />
                  </template>
                </div>
                <span
                  v-if="item.prizeStatus == 4"
                  class="myBetCell-list-right-title-bdc"
                >
                  {{ Number(item.prizeLevel) < 3 ? "$" : "" }}
                  {{
                    Number(item.prizeLevel) < 3
                      ? decimalToLength(item.prizeAmount)
                      : new Decimal(item.prizeAmount || 0).mul(1000)
                  }}
                  {{ Number(item.prizeLevel) >= 3 ? "BDC" : "" }}
                </span>
                <span
                  v-if="item.prizeStatus == 3"
                  class="myBetCell-list-right-title-bdc"
                  style="flex: 1"
                >
                  {{ $t("lotteryMoney.jsz") }}
                </span>
              </div>
              <!-- 时间 + 花费 -->
              <div class="items-center" style="justify-content: space-between">
                <span class="myBetCell-list-right-time">{{
                  item.timeStr
                }}</span>
                <span
                  v-if="Number(item.prizeLevel) < 3 && item.prizeStatus == 4"
                  class="myBetCell-list-right-bdc"
                >
                  ={{
                    toThousands(
                      decimalToLength(
                        new Decimal(item.prizeAmount || 0).mul(1000)
                      )
                    )
                  }}
                  BDC
                </span>
              </div>
            </div>
          </div>
          <!-- 下注号码,中奖号码 -->
          <div class="myBetCell-list-bottom items-center">
            <div class="myBetCell-list-bottom-item items-center">
              <div class="myBetCell-list-bottom-title">
                {{ $t("lotteryMoney.xzType") }}
              </div>
              <div class="myBetCell-list-bottom-nums items-center">
                <div
                  class="myBetCell-list-bottom-nums-item"
                  v-for="(num, index) in includesNumToArr(
                    item.hashScore || '*****',
                    item.drawNo
                  )"
                  :key="index"
                >
                  <img
                    v-if="num.include"
                    class="myBetCell-list-bottom-nums-item-bg"
                    src="/image/lottery-v3/num-zj-bg1.svg"
                  />
                  <img
                    v-else
                    class="myBetCell-list-bottom-nums-item-bg"
                    src="/image/lottery-v3/num-xz-bg1.svg"
                  />
                  <div
                    class="myBetCell-list-bottom-nums-item-text"
                    :style="{ color: num.include ? '#fff' : '#8e96a4' }"
                  >
                    {{ num.str }}
                  </div>
                </div>
              </div>
              <div class="myBetCell-list-bottom-bet">*{{ item.drawCount }}</div>
            </div>
            <div
              class="myBetCell-list-bottom-item items-center"
              @click.stop="jumpPage('webview1', item)"
            >
              <div
                class="myBetCell-list-bottom-title"
                style="text-align: right"
              >
                {{ $t("lotteryMoney.zjType") }}
              </div>
              <div class="myBetCell-list-bottom-nums items-center">
                <div
                  class="myBetCell-list-bottom-nums-item"
                  v-for="(num, index) in item.hashScore.split('')"
                  :key="index"
                >
                  <img
                    class="myBetCell-list-bottom-nums-item-bg"
                    src="/image/lottery-v3/num-zj-bg1.svg"
                  />
                  <div class="myBetCell-list-bottom-nums-item-text">
                    {{ num }}
                  </div>
                </div>
              </div>
              <img
                class="myBetCell-list-bottom-jt"
                src="/image/jt-right0-icon.svg"
              />
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="myBetCell">
import { toThousands, decimalToLength } from "@/utils";
import { useClipboard } from "@vueuse/core";
import Decimal from "decimal.js";
import { BdcBlockchainHost } from "@/config";
import { useGlobalStore } from "~~/store/global";

const globalStore = useGlobalStore();
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    list: any;
    cellType: number;
  }>(),
  {
    list: [],
    cellType: 1, // 1. 下注记录 2.中奖记录
  }
);
// 期数格式化
const formatWithTimeZone = (date: any, timeZone: string) => {
  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "numeric",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(date)));
  const month = monthFormatter.format(new Date(Number(date)));
  const day = dayFormatter.format(new Date(Number(date)));

  return `${year}.${month}.${day}`;
};

/**
 * @description: 获取剪贴板内容
 */
const getCopy = (val: string) => {
  if (!val) return;
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast(t("mvp.other.bzcjtb"));
  } else {
    copy(val);
    showToast(t("mvp.other.fzcg"));
  }
};

// 点击-页面跳转
const jumpPage = async (val: string, params: any) => {
  if (val === "webview1" && params) {
    let url = `${BdcBlockchainHost.optimistic}${params.transactionHash}`;
    if (params.chainType == 2) {
      url = `${BdcBlockchainHost.sepoliaOptimism}${params.transactionHash}`;
    }
    bridge.defaultBrowserOpen(url);
  }
};

/**
 * @description: 匹配中奖号码
 * 1. 重复出现的数字,要根据数量显示
 * @param {*} a 中奖号码
 * @param {*} b 下注号码
 * @return {*} c 下注号码,与中奖号码匹配的结果
 * @author: zhj1214
 */
const includesNumToArr = (a: string, b: string) => {
  const charMapA = new Map();

  // 构建字符映射表，记录字符在 a 中的数量
  for (let char of a) {
    charMapA.set(char, (charMapA.get(char) || 0) + 1);
  }

  let c = [];
  for (let char of b) {
    const countInA = charMapA.get(char);
    if (countInA && countInA > 0) {
      c.push({ str: char, include: true });
      charMapA.set(char, countInA - 1);
    } else {
      c.push({ str: char, include: false });
    }
  }
  return c;
};
</script>
<style scoped lang="scss">
.myBetCell {
  &-bill {
    margin: 10 * 2px 0;
    border-radius: 12 * 2px;
    overflow: hidden;
    background-color: #fff;

    &-header {
      background-color: #fff;
      padding-bottom: 14 * 2px;
      &-title {
        display: inline-block;
        font-size: 15 * 2px;
        font-weight: 590;
        color: #007bff;
        padding: 5 * 2px 15 * 2px;
        border-bottom-right-radius: 12 * 2px;
        background-color: #ecf5ff;
      }
      &-text {
        font-size: 13 * 2px;
        color: #141924;
        padding-right: 10 * 2px;
      }
    }
  }
  &-list {
    position: relative;
    align-items: flex-start;
    margin: 0 * 2px 15 * 2px;
    padding: 15 * 2px 0 * 2px;
    background-color: #fff;

    &-left {
      width: 36 * 2px;
      height: 36 * 2px;
      margin-right: 10 * 2px;
    }
    &-right {
      flex: 1;
      &-title {
        font-size: 14 * 2px;
        color: #141924;
        font-weight: 590;
        padding-right: 4 * 2px;

        &-tag {
          margin-left: 4 * 2px;
        }

        &-bdc {
          text-align: right;
          font-size: 14 * 2px;
          color: #007bff;
          font-weight: 590;
        }
        &-box {
          margin-bottom: 10 * 2px;
          justify-content: space-between;
        }
      }

      &-time {
        font-size: 13 * 2px;
        color: #999da7;
      }
      &-bdc {
        font-size: 13 * 2px;
        color: #999da7;
        font-weight: 400;
      }
    }

    &-top {
      margin-bottom: 12 * 2px;
    }
    &-bottom {
      border-radius: 100px;
      background-color: #f0f3fa;
      padding: 4 * 2px 8 * 2px;
      justify-content: space-between;

      &-item {
        justify-content: center;
      }
      &-title {
        // white-space: nowrap;
        font-size: 11 * 2px;
        color: #003873;
        margin-right: 4 * 2px;
      }
      &-nums {
        justify-content: center;
        &-item {
          position: relative;
          width: 18 * 2px;
          height: 18 * 2px;
          margin-right: 2 * 2px;
          &-bg {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
          }

          &-text {
            position: relative;
            z-index: 9;
            line-height: 18 * 2px;
            text-align: center;
            color: #fff;
            font-size: 13 * 2px;
            font-weight: 590;
          }
        }
      }

      &-bet {
        font-size: 13 * 2px;
        color: #141924;
        margin-left: 4 * 2px;
      }

      &-jt {
        width: 11 * 2px;
        height: 11 * 2px;
        margin-left: 4 * 2px;
      }
    }
  }
}
</style>
